<template>
  <div id="subtmpl">
      <div @click="substrict">-</div>
      <div v-text="count"></div>
      <div @click="add">+</div>
  </div>
</template>

<script>
export default {
    data(){
        return {
            count:1//代表购买商品的数量 
        }
    },
    methods:{
        //点击数量减少事件
        substrict(){
            this.count--;
            //确保最小数为1
            if(this.count < 1){
                this.count = 1;
            }
            this.sendmessage();
        },
        //点击数量增加事件
        add(){
            this.count++;
            this.sendmessage();
        },
        //传值给父组件
        sendmessage(){
            this.$emit('dataobj',this.count);//$emit 创建一个方法，并传值给它
        }
    }
}
</script>

<style scoped>
 #subtmpl div{
     width: 50px;
     height: 30px;
     line-height: 30px;
     text-align: center;
     border: 1px solid #0094ff;
     display: inline-block;
 }
</style>
